<template>
  <div class="nav-menu">
    <div class="back" @click="backToHome()">
      <img src="@/assets/image/common/logo.png" />
    </div>
    <mini-search-bar v-show="!$route.meta.hideMiniSearchBar"></mini-search-bar>
    <div class="container">
      <div class="avatar-container">
        <avatar-pop-over
          :avatar="avatar"
          :userDept="userDept"
          :userName="userName"
          :userType="userType"
          :userTypeName="userTypeName"
        ></avatar-pop-over>
        <!-- <div class="name">张三</div> -->
      </div>
      <div class="tag-container">
        <history-pop-over></history-pop-over>
        <div class="message" @click="jumpMessage">消息</div>
        <publish-pop-over></publish-pop-over>
      </div>
    </div>
  </div>
</template>

<script>
import AvatarPopOver from "@/components/Frame/Popovers/AvatarPopOver.vue";
import HistoryPopOver from "@/components/Frame/Popovers/HistoryPopOver.vue";
import PublishPopOver from "@/components/Frame/Popovers/PublishPopOver.vue";
import MiniSearchBar from "@/components/Frame/SearchBar/MiniSearchBar.vue";

export default {
  components: { HistoryPopOver, AvatarPopOver, PublishPopOver, MiniSearchBar },
  name: "NavMenu",
  data() {
    return {
      userName: this.$store.getters.userName,
      userType: this.$store.getters.userType,
      avatar: this.$store.getters.avatar,
      userTypeName: this.$store.getters.userTypeName,
      userDept: this.$store.getters.userDept,
    };
  },
  methods: {
    //转到文档上传页面
    goUpload() {
      this.$router.push("/upload");
    },
    backToHome() {
      this.$router.push("/home");
    },
    jumpMessage() {
      this.$router.push("/MyselfMessage")
    }
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.nav-menu {
  z-index: 2001;
  width: 100%;
  position: relative;
  height: 48px;
  padding-right: 40px;
  padding-left: 40px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgb(0, 0, 0, 0.18), 0 6px 20px 0 rgba(0, 0, 0, 0);
  display: flex;
  align-items: top;
  justify-content: space-between;
}
.back {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 48px;
  width: 120px;
}
.back > img {
  height: 32px;
  width: 120px;
}
.instead {
  height: 0;
  width: 0;
}
.container {
  display: flex;
  height: 48px;
  width: 400px;
  align-items: center;
}
.avatar-container {
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  line-height: 48px;
  margin-right: 16px;
}
.tag-container {
  height: 48px;
  width: 312px;
  line-height: 48px;
}
.upload {
  cursor: pointer;
  display: inline-block;
  height: 48px;
  width: 96px;
  color: white;
  line-height: 48px;
}
.upload:hover {
  color: aquamarine;
}
.name {
  height: 48px;
  width: 80px;
  font-size: 18px;
  font-weight: 300;
  text-align: left;
  color: black;
  box-sizing: border-box;
  padding-left: 6px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.upload {
  margin-right: 24px;
  position: relative;
  font-weight: bold;
}
.upload:after {
  content: "";
  position: absolute;
  left: 24px;
  top: auto;
  bottom: 10px;
  right: auto;
  height: 2px;
  width: 48px;
  background-color: white;
}
.message {
  cursor: pointer;
  display: inline-block;
  height: 48px;
  width: 96px;
  color: #005a95;
  line-height: 48px;
  font-weight: bold;
}
.message:hover {
  color: #7dc5eb;
}
</style>
